<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2025-03-20 10:55:35
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-04-09 11:20:15
 * @FilePath: \leeui\lee_ui_test\src\views\lee\form.vue
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { reactive, ref, onMounted, h } from "vue";
import { ElDivider, ElButton } from "element-plus";
import { LElForm, LElCom } from "@uf_lee/leeui";
import type { FormSchema, ComData } from "@uf_lee/leeui";
// import type { FormItemRule } from "element-plus";
// import type { FormRules } from "element-plus";

// --------------------- Autocomplete 使用的一些设置 start -------------------------
interface RestaurantItem {
  value: string;
  link: string;
}
const restaurants = ref<RestaurantItem[]>([]);
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value;
  // call callback function to return suggestions
  cb(results);
};
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};
const loadAll = () => {
  return [
    { value: "vue", link: "https://github.com/vuejs/vue" },
    { value: "element", link: "https://github.com/ElemeFE/element" },
    { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
    { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
    { value: "vuex", link: "https://github.com/vuejs/vuex" },
    { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
    { value: "babel", link: "https://github.com/babel/babel" },
  ];
};
const handleSelect = (item: Record<string, any>) => {
  console.log(item);
};

onMounted(() => {
  restaurants.value = loadAll();
});
// --------------------- Autocomplete 使用的一些设置 end -------------------------
const required = () => {
  return {
    required: true,
    message: "请输入内容",
    trigger: "blur",
  };
};

const rules = reactive({
  Input: [required()],
});

const schema: FormSchema[] = [
  {
    field: "undefined",
    label: "undefined",
    componentProps: {
      placeholder: "默认输入框",
    },
    slots: {
      append: () => h("span", ".com"),
    },
    colProps: {
      span: 24,
    },
  },
  {
    field: "Radio",
    label: "Radio",
    component: "Radio",
    componentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    colProps: {
      span: 6,
    },
  },
  {
    field: "RadioButton",
    label: "RadioButton",
    component: "RadioButton",
    componentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    colProps: {
      span: 6,
    },
  },
  {
    field: "Checkbox",
    label: "Checkbox",
    component: "Checkbox",
    componentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    colProps: {
      span: 6,
    },
  },
  {
    field: "CheckboxButton",
    label: "CheckboxButton",
    component: "CheckboxButton",
    componentProps: {
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    colProps: {
      span: 6,
    },
  },
  {
    field: "Input",
    label: "Input",
    component: "Input",
    componentProps: {
      placeholder: "输入框",
    },
    colProps: {
      span: 8,
    },
  },
  {
    field: "Autocomplete",
    label: "Autocomplete",
    component: "Autocomplete",
    componentProps: {
      placeholder: "自动补全输入框",
      fetchSuggestions: querySearch,
      onselect: handleSelect,
    },
    colProps: {
      span: 8,
    },
  },
  {
    field: "InputNumber",
    label: "InputNumber",
    component: "InputNumber",
    componentProps: {
      placeholder: "数字输入框",
    },
    colProps: {
      span: 8,
    },
  },
  {
    field: "Select",
    label: "Select",
    component: "Select",
    componentProps: {
      placeholder: "请选择下拉框",
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    colProps: {
      span: 10,
    },
  },
  {
    field: "Cascader",
    label: "Cascader",
    component: "Cascader",
    componentProps: {
      placeholder: "级联选择器",
      options: [
        {
          label: "选项1",
          value: "1",
          children: [
            {
              label: "选项1-1",
              value: "1001",
            },
            {
              label: "选项1-2",
              value: "1002",
            },
            {
              label: "选项1-3",
              value: "1003",
            },
            {
              label: "选项1-4",
              value: "1004",
            },
          ],
        },
        {
          label: "选项2",
          value: "2",
          children: [
            {
              label: "选项2-1",
              value: "2001",
            },
            {
              label: "选项2-2",
              value: "2002",
            },
            {
              label: "选项2-3",
              value: "2003",
            },
            {
              label: "选项2-4",
              value: "2004",
            },
          ],
        },
        {
          label: "选项3",
          value: "3",
          children: [
            {
              label: "选项3-1",
              value: "3001",
              children: [
                {
                  label: "选项3-1-1",
                  value: "3001001",
                },
                {
                  label: "选项3-1-1",
                  value: "3001--2",
                },
              ],
            },
            {
              label: "选项3-2",
              value: "3002",
            },
          ],
        },
        {
          label: "选项4",
          value: "4",
        },
        {
          label: "选项5",
          value: "5",
        },
      ],
    },
    colProps: {
      span: 10,
    },
  },
  {
    field: "Switch",
    label: "Switch",
    component: "Switch",
    componentProps: {},
    colProps: {
      span: 4,
    },
  },
  {
    field: "Slider",
    label: "Slider",
    component: "Slider",
    componentProps: {},
    colProps: {
      span: 24,
    },
  },
  {
    field: "TimePicker",
    label: "TimePicker",
    component: "TimePicker",
    componentProps: {
      placeholder: "时间选择器",
    },
    colProps: {
      span: 6,
    },
  },
  {
    field: "DatePicker",
    label: "DatePicker",
    component: "DatePicker",
    componentProps: {
      placeholder: "日期选择器",
    },
    colProps: {
      span: 6,
    },
  },
  {
    field: "Rate",
    label: "Rate",
    component: "Rate",
    componentProps: {},
    colProps: {
      span: 6,
    },
  },
  {
    field: "ColorPicker",
    label: "ColorPicker",
    component: "ColorPicker",
    componentProps: {},
    colProps: {
      span: 6,
    },
  },
  {
    field: "Transfer",
    label: "Transfer",
    component: "Transfer",
    componentProps: {
      data: [
        {
          key: "1",
          label: "选项1",
          disabled: false,
        },
        {
          key: "2",
          label: "选项2",
          disabled: false,
        },
        {
          key: "3",
          label: "选项3",
          disabled: true,
        },
      ],
    },
    colProps: {
      span: 12,
    },
  },
  {
    field: "Divider",
    label: "Divider",
    component: "Divider",
    componentProps: {
      contentPosition: "center",
    },
    colProps: {
      span: 12,
    },
  },
  {
    field: "TimeSelect",
    label: "TimeSelect",
    component: "TimeSelect",
    componentProps: {
      placeholder: "时间选择",
    },
    colProps: {
      span: 8,
    },
  },
  {
    field: "SelectV2",
    label: "SelectV2",
    component: "SelectV2",
    componentProps: {
      placeholder: "虚拟化选择器",
      options: [
        {
          label: "选项1",
          value: "1",
        },
        {
          label: "选项2",
          value: "2",
        },
      ],
    },
    colProps: {
      span: 8,
    },
  },
  {
    field: "Mention",
    label: "Mention",
    component: "Mention",
    componentProps: {
      placeholder: "使用@来触发",
      options: [
        {
          label: "张三",
          value: "zhangsan",
        },
        {
          label: "李四",
          value: "lisi",
        },
      ],
    },
    colProps: {
      span: 8,
    },
  },
  {
    field: "InputTag",
    label: "InputTag",
    component: "InputTag",
    componentProps: {
      placeholder: "标签输入框",
    },
    colProps: {
      span: 8,
    },
  },
];

const formRef = ref();

/**
 * @param ref ElForm实例
 */
const register = (ref: any) => {
  formRef.value = ref;
};

// 值
const model: any = reactive({
  undefined: "12312",
  Divider: 213123,
});

const onVerify = () => {
  console.log("验证", formRef.value);
  if (!formRef.value) return;
  formRef.value.validate((valid: any, fields: any) => {
    if (valid) {
      console.log("表单验证成功");
    } else {
      console.log("表单验证失败", fields);
    }
  });
};

const comData: ComData = {
  field: "分割线的值",
  component: "Input",
  componentProps: {
    placeholder: "分割线的值",
  },
};
</script>

<template>
  <el-divider content-position="left">model</el-divider>
  {{ model }}
  <el-divider content-position="left">LElForm</el-divider>
  <LElForm
    :rules="rules"
    @register="register"
    :schema="schema"
    :model="model"
  />
  <el-button type="primary" @click="onVerify()"> 验证 </el-button>
  <el-divider content-position="left">LElFormItemCom</el-divider>
  <LElCom :data="schema[0]" v-model="model.undefined" />
  <LElCom :data="schema[1]" v-model="model[schema[1].field]" />
  <LElCom :data="comData" v-model="model.Divider" />
</template>
